<!--
 * @Author: 471826078@qq.com
 * @Date: 2020-12-24 15:37:46
 * @LastEditors: 471826078@qq.com
-->
<template>
  <div class="mainCon">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="commonTab"
    >
      <el-tab-pane
        label="所选M个月内，落实了N次代发工资的项目"
        name="first"
      ></el-tab-pane>
      <el-tab-pane label="查询某月项目资金拨付情况" name="third"></el-tab-pane>
      <el-tab-pane label="银行缴存/代发按时段统计" name="second"></el-tab-pane>
      <el-tab-pane label="项目在时段内产生的数据" name="four"></el-tab-pane>
    </el-tabs>
    <component v-bind:is="currentTabComponent"></component>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import queryCompment from './queryCompment.vue'
import MyColumn from './../constructAttendance/MyColumn'
import CustomQueryMonths from './customQueryMonths'
import CustomQuerySomeMonth from './CustomQuerySomeMonth'
import projectGeneratedData from './projectGeneratedData'
import dfTime from './dfTime'

export default {
  name: 'customQuery',
  components: {
    queryCompment,
    MyColumn,
    CustomQueryMonths,
    CustomQuerySomeMonth,
    dfTime,
    projectGeneratedData,
  },
  data() {
    return {
      activeName: 'first',
      currentTabComponent: 'CustomQueryMonths',
    }
  },

  methods: {
    handleClick(val) {
      if (val.name == 'third') {
        this.currentTabComponent = 'CustomQuerySomeMonth'
      } else if (val.name == 'first') {
        this.currentTabComponent = 'CustomQueryMonths'
      } else if (val.name == 'second') {
        this.currentTabComponent = 'dfTime'
      } else {
        this.currentTabComponent = 'projectGeneratedData'
      }
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  padding: 0;
  top: 130px;
}
/deep/.el-tabs__nav-wrap {
  //   padding: 0 40px;
  .el-tabs__nav-prev {
    width: 40px;
    text-align: center;
    margin-top: 0;
    line-height: 57px;
    //   border-right: 1px solid #f1f1f1;
    box-shadow: 7px 0px 7px -7px #aaaaaa;
  }
  .el-tabs__nav-next {
    width: 40px;
    text-align: center;
    margin-top: 0;
    line-height: 57px;
    box-shadow: -7px 0px 7px -7px #aaaaaa;
  }
  .el-tabs__item {
    &:first-child {
      margin-left: 15px;
    }
    &:last-child {
      margin-right: 15px;
    }
  }
}

.tableBox {
  padding: 0 24px;

  &Tip {
    height: 68px;
    line-height: 36px;
    font-size: 14px;
    color: #666;
    padding: 16px 0;
    .el-col {
      height: 36px;
      line-height: 36px;
    }
    .colSetupBtn {
      display: inline-block;
      vertical-align: top;
    }
  }
}
.tablePage {
  padding: 0 24px;
}

.commonTab {
  margin-bottom: 24px;
}
</style>
